import { useContext } from 'react'
import { EditorConfigContext } from '../App'

function Material(props) {
  const { onDragStart } = props
  const { componentList, componentMap } = useContext(EditorConfigContext)
  console.log(componentMap)

  const renderItemComponent = (key) => {
    return componentMap[key].render()
  }

  return (
    <>
      {componentList.map((component, index) => {
        return (
          <div
            key={index}
            className="editor-material-item"
            draggable
            onDragStart={(e) => onDragStart(e, component)}
          >
            {renderItemComponent(component.key)}
            <span className="editor-material-item-label">
              {component.label}
            </span>
          </div>
        )
      })}
    </>
  )
}

export default Material
